<template>
 <div class="login" style="text-align:center;">
  <div class="wrap">
    <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>
        <rect fill='#F6FEFF' width='540' height='450' />
        <defs>
            <linearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%' gradientTransform='rotate(360,960,483)'>
                <stop offset='0' stop-color='#F6FEFF' />
                <stop offset='1' stop-color='#3E98FF' />
            </linearGradient>
            <pattern patternUnits='userSpaceOnUse' id='b' width='519' height='432.5' x='0' y='0' viewBox='0 0 1080 900'>
                <g fill-opacity='0.03'>
                    <polygon fill='#444' points='90 150 0 300 180 300' />
                    <polygon points='90 150 180 0 0 0' />
                    <polygon fill='#AAA' points='270 150 360 0 180 0' />
                    <polygon fill='#DDD' points='450 150 360 300 540 300' />
                    <polygon fill='#999' points='450 150 540 0 360 0' />
                    <polygon points='630 150 540 300 720 300' />
                    <polygon fill='#DDD' points='630 150 720 0 540 0' />
                    <polygon fill='#444' points='810 150 720 300 900 300' />
                    <polygon fill='#FFF' points='810 150 900 0 720 0' />
                    <polygon fill='#DDD' points='990 150 900 300 1080 300' />
                    <polygon fill='#444' points='990 150 1080 0 900 0' />
                    <polygon fill='#DDD' points='90 450 0 600 180 600' />
                    <polygon points='90 450 180 300 0 300' />
                    <polygon fill='#666' points='270 450 180 600 360 600' />
                    <polygon fill='#AAA' points='270 450 360 300 180 300' />
                    <polygon fill='#DDD' points='450 450 360 600 540 600' />
                    <polygon fill='#999' points='450 450 540 300 360 300' />
                    <polygon fill='#999' points='630 450 540 600 720 600' />
                    <polygon fill='#FFF' points='630 450 720 300 540 300' />
                    <polygon points='810 450 720 600 900 600' />
                    <polygon fill='#DDD' points='810 450 900 300 720 300' />
                    <polygon fill='#AAA' points='990 450 900 600 1080 600' />
                    <polygon fill='#444' points='990 450 1080 300 900 300' />
                    <polygon fill='#222' points='90 750 0 900 180 900' />
                    <polygon points='270 750 180 900 360 900' />
                    <polygon fill='#DDD' points='270 750 360 600 180 600' />
                    <polygon points='450 750 540 600 360 600' />
                    <polygon points='630 750 540 900 720 900' />
                    <polygon fill='#444' points='630 750 720 600 540 600' />
                    <polygon fill='#AAA' points='810 750 720 900 900 900' />
                    <polygon fill='#666' points='810 750 900 600 720 600' />
                    <polygon fill='#999' points='990 750 900 900 1080 900' />
                    <polygon fill='#999' points='180 0 90 150 270 150' />
                    <polygon fill='#444' points='360 0 270 150 450 150' />
                    <polygon fill='#FFF' points='540 0 450 150 630 150' />
                    <polygon points='900 0 810 150 990 150' />
                    <polygon fill='#222' points='0 300 -90 450 90 450' />
                    <polygon fill='#FFF' points='0 300 90 150 -90 150' />
                    <polygon fill='#FFF' points='180 300 90 450 270 450' />
                    <polygon fill='#666' points='180 300 270 150 90 150' />
                    <polygon fill='#222' points='360 300 270 450 450 450' />
                    <polygon fill='#FFF' points='360 300 450 150 270 150' />
                    <polygon fill='#444' points='540 300 450 450 630 450' />
                    <polygon fill='#222' points='540 300 630 150 450 150' />
                    <polygon fill='#AAA' points='720 300 630 450 810 450' />
                    <polygon fill='#666' points='720 300 810 150 630 150' />
                    <polygon fill='#FFF' points='900 300 810 450 990 450' />
                    <polygon fill='#999' points='900 300 990 150 810 150' />
                    <polygon points='0 600 -90 750 90 750' />
                    <polygon fill='#666' points='0 600 90 450 -90 450' />
                    <polygon fill='#AAA' points='180 600 90 750 270 750' />
                    <polygon fill='#444' points='180 600 270 450 90 450' />
                    <polygon fill='#444' points='360 600 270 750 450 750' />
                    <polygon fill='#999' points='360 600 450 450 270 450' />
                    <polygon fill='#666' points='540 600 630 450 450 450' />
                    <polygon fill='#222' points='720 600 630 750 810 750' />
                    <polygon fill='#FFF' points='900 600 810 750 990 750' />
                    <polygon fill='#222' points='900 600 990 450 810 450' />
                    <polygon fill='#DDD' points='0 900 90 750 -90 750' />
                    <polygon fill='#444' points='180 900 270 750 90 750' />
                    <polygon fill='#FFF' points='360 900 450 750 270 750' />
                    <polygon fill='#AAA' points='540 900 630 750 450 750' />
                    <polygon fill='#FFF' points='720 900 810 750 630 750' />
                    <polygon fill='#222' points='900 900 990 750 810 750' />
                    <polygon fill='#222' points='1080 300 990 450 1170 450' />
                    <polygon fill='#FFF' points='1080 300 1170 150 990 150' />
                    <polygon points='1080 600 990 750 1170 750' />
                    <polygon fill='#666' points='1080 600 1170 450 990 450' />
                    <polygon fill='#DDD' points='1080 900 1170 750 990 750' />
                </g>
            </pattern>
        </defs>
        <rect x='0' y='0' fill='url(#a)' width='100%' height='100%' />
        <rect x='0' y='0' fill='url(#b)' width='100%' height='100%' />
    </svg>
  </div>
  <div class="login-box">
    <div class="login-box-title">
      <img style="width:45px;height:45px;" src="../../assets/Img/logo.png" alt="">
      <div class="login-box-title-text">瑞通炭素</div>
    </div>
    <el-form :rules="rules" ref="form" :model="form">
        <el-form-item prop="usename">
          <el-input v-model="form.usename"><template slot="prepend"><i class="el-icon-user loginIcon"></i></template></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input type="password" v-model="form.password"><template slot="prepend"><i class="el-icon-lock loginIcon"></i></template></el-input>
        </el-form-item>
    </el-form>
    <div class="login-box-footer">
      <el-button @keydown="keydown()" @click.prevent="submitForm()" type="primary" style="width:100%;padding:12px 60px;font-size:16px;">登录</el-button>
    </div>
  </div>
  <div class="link-box">
    <el-tooltip class="item" effect="dark" content="瑞通碳素环保平台" placement="top">
      <el-link  :underline="false" href="http://106.52.170.16:8401" target="_Blank"><i class="el-icon-platform-eleme"></i><div style="font-size:12px;align-item:center;">环保平台</div></el-link>
    </el-tooltip>
  </div>
    <!-- <el-button @click="login" type="primary" style="margin:20px;">login</el-button> -->
 </div>
</template>

<script>
import { userLogin } from '@/api/login.js'
import Cookies from 'js-cookie'
export default {
  name: 'login',
  components: {},
  data () {
    var validateUsename = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入用户名'))
      }
    }
    var validatePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'))
      }
    }
    return {
      form: {
        usename: '',
        password: ''
      },
      rules: {
        usename: [
          { validator: validateUsename, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  created () {
    var _this = this
    document.addEventListener('keydown', _this.watchEnter)
  },
  mounted () {
    // console.log(this.$http)
  },
  destroyed () {
    // 移除监听回车按键
    var _this = this
    document.removeEventListener('keydown', _this.watchEnter)
  },
  methods: {
    keydown () {
      return false
    },
    submitForm () {
      this.login()
      // if (this.form.usename === 'admin' && this.form.password === 'admin') { this.login() } else {
      //   this.$notify({
      //     title: '提示',
      //     type: 'error',
      //     message: '账号或密码错误'
      //   })
      // }
    },
    login () {
      const that = this
      const payload = {
        account: that.form.usename,
        password: that.form.password
      }
      userLogin(payload).then(res => {
        if (res.data.code === 200) {
          console.log(res)
          sessionStorage.setItem('tableTabs', JSON.stringify([]))
          that.$store.commit('SET_USERINFO', res.data.data)
          Cookies.set('token', res.data.data.token, { path: '/' })
          Cookies.set('role', res.data.data.role, { path: '/' })
          if (res.data.data.firstPage !== '') {
            that.$router.push(res.data.data.firstPage)
          } else {
            this.$message({
              message: '该用户未设置首页',
              type: 'warning'
            })
            var firstRouter = ''
            switch (res.data.data.roleCode) {
              case '备品库':
                firstRouter = '/repertory'
                break
              case '成型库管':
                firstRouter = '/profiling'
                break
              case '质检':
                firstRouter = '/profileQuaSide'
                break
              default:firstRouter = '/main'
            }
            that.$router.push(firstRouter)
          }
          this.$notify({
            title: '提示',
            message: '欢迎,' + res.data.data.name + '!',
            type: 'success'
          })
        } else {
          this.$notify({
            title: '提示',
            message: res.data.message,
            type: 'warning'
          })
        }
      })
    },
    watchEnter (e) {
      var keyNum = window.event ? e.keyCode : e.which // 获取被按下的键值
      if (keyNum === 13) {
        this.submitForm()
      }
    }
  }
}
</script>

<style  scoped>
.login{
  width: 100vw;
  height: 100vh;
  .wrap{
    width: 100vw;
    height: 100vh;
  }
}
.login-box{
  position: absolute;
  top: 22%;
  left: 50%;
  margin-left: -250px;
  width:420px;
  padding: 40px;

}
.link-box{
  width: 100%;
  position: absolute;
  bottom: 100px;
  text-align: center;

}
.el-link{
    color: rgb(25, 70, 129);
    font-size: 32px;
  }
  .el-link:hover{
    color: rgba(25, 70, 129, 0.719);
  }
.loginIcon{
  font-size: 16px;
}
.login-box-title{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin: 30px auto;


  }
  img{
      width: 30px;
      height: 30px;
    }
    .login-box-title-text{
      font-size: 32px;
    }
    .login-box-footer {
    margin-bottom: 12px;
  }
</style>
